<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="system">
             <home-bar :currentPage='currentPage'></home-bar>
             <div class="system-main">
                 <div class="main-position">
                     首页  >   系统设置  >   库存预警设置
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                   <div class="main-height"></div>
                 <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/system" @click.native="addPath('/system','系统设置')">
                                <li>商户资料</li>
                            </router-link>
                            <router-link to="/systemSafe" @click.native="addPath('/systemSafe','系统设置')">
                                <li>安全设置</li>
                            </router-link>
                            <router-link to="/systemStockAlert" @click.native="addPath('/systemStockAlert','系统设置')">
                                <li  class="active">库存预警设置</li>
                            </router-link>
                           <router-link  to="/recommend" @click.native="addPath('/recommend','系统设置')">
                                <li>我要推荐</li> 
                            </router-link>
                            <router-link to="/recommends" @click.native="addPath('/recommends','系统设置')">
                                <li>推荐管理</li>
                            </router-link>
                            <router-link to="/about" @click.native="addPath('/about','系统设置')">
                                <li>关于我们</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="systemStockAlert">
                        <div class="stockAlertTop">
                            <a href="javascript:void(0);" @click="clickAddStockAlert">添加库存预警</a>
                            <a href="#" @click="clickChangeStockAlert">修改预警值</a>
                            <span>通用库存预警值：<em>10</em>（件）</span>
                        </div>
                        <div data-v-621a7dad="" class="clear system-con-border">
                            <span data-v-621a7dad="" class="fl">自定义库存预警设置</span>
                            <div data-v-621a7dad="" class="fl system-con-borders"></div>
                        </div>
                        <div class="stockAlertTable">
                            <table>
                                <tr>
                                    <td>药品编码</td>
                                    <td>药品名称</td>
                                    <td>库存预警值</td>
                                    <td>操作</td>
                                </tr>
                                <tr>
                                    <td>1234567890987654321</td>
                                    <td>感康感冒药</td>
                                    <td>100</td>
                                    <td>
                                        <button>修改</button>
                                        <button>删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1234567890987654321</td>
                                    <td>感康感冒药</td>
                                    <td>100</td>
                                    <td>
                                        <button>修改</button>
                                        <button>删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1234567890987654321</td>
                                    <td>感康感冒药</td>
                                    <td>100</td>
                                    <td>
                                        <button>修改</button>
                                        <button>删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1234567890987654321</td>
                                    <td>感康感冒药</td>
                                    <td>100</td>
                                    <td>
                                        <button>修改</button>
                                        <button>删除</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                 </div>
             </div>
<!-- 弹窗开始 -->
            <div class="system-menban" v-show="showSystemPopup"></div>
             <div class="systemPopup" v-show="showSystemPopup">
                <div class="topTitle">
                     <span>{{systemPopupTitle}}</span>
                     <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <!-- 添加库存预警 -->
                <div class="stockAlertPopup" v-show="showAddStockAlert">
                    <div class="itemBox clear">
                        <span class="leftTitle">药品编码</span>
                        <div class="rightMain">
                          <input type="text" class="input">
                        </div>
                    </div>
                    <div class="itemBox clear">
                       <span class="leftTitle">药品编码</span>
                        <div class="rightMain">
                          <ul class="drugMsgUl">
                              <li>药品分类<span>药品>化学药品</span></li>
                              <li>药品名称<span>感康感冒药</span></li>
                              <li>生产厂家<span>广东制药</span></li>
                          </ul>
                        </div>
                    </div>
                    <div class="itemBox clear">
                       <span class="leftTitle">预警值</span>
                        <div class="rightMain stockAlertNum">
                           <input type="text">
                           <span>件</span>
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div class="fl">提交</div> 
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
                <!-- 修改库存预警 -->
                <div class="stockAlertPopup" v-show="showChangeStockAlert">
                    <div class="itemBox clear">
                        <span class="leftTitle">预警值</span>
                        <div class="rightMain">
                          <input type="text" class="input">
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div class="fl">确定</div> 
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
             </div>
<!-- 弹窗结束 -->
       </div>
  </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/system",
      currentPage: { path: "/systemStockAlert", name: "系统设置" },
      showSystemPopup: false,
      showAddStockAlert: false,
      systemPopupTitle: "",
      showChangeStockAlert: false
    };
  },
  methods: {
    clickAddStockAlert() {
      this.showSystemPopup = true;
      this.showAddStockAlert = true;
      this.systemPopupTitle = "添加库存预警";
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.showAddStockAlert = false;
      this.showChangeStockAlert = false;
    },
    clickChangeStockAlert() {
      this.showSystemPopup = true;
      this.showChangeStockAlert = true;
      this.systemPopupTitle = "修改预警值";
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  }
};
</script>

<style lang="less" scoped>
@import "system.less";
</style>



